I have a module tree in my Angular project, with each module incorporating its own routing.
I have a parent module and a number of child modules.
Parent module routing works but none of the child routes work: Error: NG04002: Cannot match any routes.
Here is my parent module :
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FrameworkComponent } from './framework/framework.component';
import { AboutComponent } from './about/about.component';
import { HomeListComponent } from './home-list/home-list.component';
import { HomepageComponent } from './homepage/homepage.component';
import { RayonsModule } from './rayons/rayons.module';
import { SharedModule } from './shared/shared.module';
import { NotFoundComponent } from './not-found/not-found.component';
@NgModule({
declarations: [
AppComponent,
FrameworkComponent,
AboutComponent,
HomeListComponent,
HomepageComponent,
NotFoundComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
PlanningModule,
RayonsModule,
SharedModule,
],
providers: [],
bootstrap: [FrameworkComponent],
})
export class AppModule {}
and here is his routing module :
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutComponent } from './about/about.component';
import { HomeListComponent } from './home-list/home-list.component';
import { ListesHomeComponent } from './listes/listes-home/listes-home.component';
import { NotFoundComponent } from './not-found/not-found.component';
const routes: Routes = [
{ path: 'about', component: AboutComponent },
{ path: 'listes', component: ListesHomeComponent },
{ path: '', component: HomeListComponent },
{ path: '**', component: NotFoundComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
So far everything is working fine
I then have child modules that look like this
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from 'src/app/shared/shared.module';
import { PlanningHomeComponent } from './planning-home/planning-home.component';
import { PlanningRoutingModule } from './planning-routing.module';
@NgModule({
declarations: [PlanningHomeComponent],
imports: [CommonModule, SharedModule, PlanningRoutingModule],
})
export class PlanningModule {}
and the routing module :
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PlanningHomeComponent } from './planning-home/planning-home.component';
const routes: Routes = [{ path: 'planning', component: PlanningHomeComponent }];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class PlanningRoutingModule {}
And my links are like this :
<a
routerLink="planning"
routerLinkActive="active"
class="nav-link"
aria-current="page"
>Planning</a
>
I don't understand why it can't find the child routes. Thank you in advance for your precious help.